<template>
  <div class="dt-editor">
    <div class="toolbar-wrap">
      <Toolbar
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
    </div>

    <div class="editor-wrap">
      <div class="editor-wrapInner">
        <Editor
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            style="min-height: 900px"
            @onCreated="handleCreated"
        />
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'

const editorRef = shallowRef()
const mode = 'default'
const valueHtml = ref('<p>hello</p>')

onMounted(() => {
  setTimeout(() => {
    valueHtml.value = `<b>使用wangEditor编辑器,地址: https://www.wangeditor.com/v5/getting-started.html</b>`
  }, 1500)
})

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

</script>

<style lang="less" scoped>
.dt-editor{
  height: 100%;
  width: 100%;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e8e8e8;

  .toolbar-wrap{
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: center;
    background: #fff;
  }

  .editor-wrap{
    flex: 1;
    overflow-y: auto;

    .editor-wrapInner{
      width: 768px;
      margin: 30px auto;
      box-shadow: 0 1px 5px 0 rgb(0 0 0 / 5%);
      background-color: #fff;
      padding: 30px 75px 72px 75px;
      border: 1px solid #e8e8e8;
      border-radius: 4px 4px 0 0;
    }
  }
}
</style>